<template>
  <div class="user-avatar-container">
    <el-dropdown trigger="click" @command="handleCommand">
      <div class="avatar-wrapper">
        <el-avatar :size="36" :src="avatarUrl" />
        <span class="username">{{ username }}</span>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="profile">
            <el-icon><User /></el-icon>
            个人中心
          </el-dropdown-item>
          <el-dropdown-item divided command="logout">
            <el-icon><SwitchButton /></el-icon>
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { User, SwitchButton } from '@element-plus/icons-vue'
import {useUserStore} from '@/store/UserStore'

const router = useRouter()
const store = useUserStore();
const username = ref('管理员')
const avatarUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')


onMounted(()=>{
  console.log(store.userInfo);
  username.value = store.userInfo.username;
});
const handleCommand = (command) => {
  if (command === 'logout') {
    sessionStorage.removeItem('author_token')
    router.push('/login')
  } else if (command === 'profile') {
    router.push('/profile')
  }
}
</script>

<style scoped>
.user-avatar-container {
  margin-left: auto;
  padding-right: 20px;
}

.avatar-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.username {
  margin-left: 8px;
  color: white;
  font-size: 14px;
}
</style>